// 日志管理页面
<template>
	<div class="all">
		<div id="datediv">
			<el-date-picker v-model="logdate" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
			 start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
		</div>

		<div id="searchdiv">
			<el-input placeholder="请输入内容" v-model="input" class="input-with-select">
				<el-select v-model="select" slot="prepend" style="width: 110px;">
					<el-option label="用户姓名" value="0"></el-option>
				</el-select>
				<el-button @click="searchLog()" slot="append" icon="el-icon-search"></el-button>
			</el-input>
		</div>
		<div style="height: 10px;"></div>

		<el-table :data="pagination.records" border>
			<el-table-column fixed="left" prop="logId" label="日志编号" sortable></el-table-column>
			<el-table-column prop="logOp" label="日志操作"></el-table-column>
			<el-table-column prop="user.userId" label="用户编号"></el-table-column>
			<el-table-column prop="user.userName" label="用户姓名"></el-table-column>
			<el-table-column prop="logObject" label="操作对象"></el-table-column>
			<el-table-column prop="logDate" label="操作时间" sortable></el-table-column>
			<el-table-column prop="logMark" label="日志备注"></el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[6, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagination: {
					//分页后的考试信息
					current: 1, //当前页
					total: null, //记录条数
					size: 6, //每页条数
				},
				input: "",
				select: "用户姓名",
				logdate: "",
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				}
			};
		},
		//初始化
		created() {
			this.getStudentInfo();
		},
		methods: {
			getStudentInfo() {
				var startDate;
				var endDate;

				if (this.logdate == "" || this.logdate == null) {
					startDate = "";
					endDate = "";
				} else {
					startDate = this.renderTime(this.logdate[0]);
					endDate = this.renderTime(this.logdate[1]);
				}

				console.log(startDate);
				console.log(endDate);

				//分页查询所有试卷信息
				this.$axios(`/api/getloginfo`, {
						params: {
							username: this.input,
							startDate: startDate,
							endDate: endDate,
							page: this.pagination.current,
							limit: this.pagination.size
						}
					}

				).then(res => {
					//将时间转换为字符串
					for (var i = 0; i < res.data.records.length; i++) {
						res.data.records[i].logDate = this.renderTime(res.data.records[i].logDate)
					}
					this.pagination = res.data;
				}).catch(error => {});
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val;
				this.getStudentInfo();
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val;
				this.getStudentInfo();
			},
			//查询按钮点击调用的函数
			searchLog() {

				var startDate;
				var endDate;

				if (this.logdate == ""|| this.logdate == null) {
					startDate = "";
					endDate = "";
				} else {
					startDate = this.renderTime(this.logdate[0]);
					endDate = this.renderTime(this.logdate[1]);
				}

				console.log(startDate);
				console.log(endDate);

				//分页查询所有试卷信息
				this.$axios(`/api/getloginfo`, {
						params: {
							username: this.input,
							startDate: startDate,
							endDate: endDate,
							page: this.pagination.current,
							limit: this.pagination.size
						}
					}

				).then(res => {
					//将时间转换为字符串
					for (var i = 0; i < res.data.records.length; i++) {
						res.data.records[i].logDate = this.renderTime(res.data.records[i].logDate)
					}
					this.pagination = res.data;
				}).catch(error => {});
			},
			//将日期转换为字符串
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
			}
		}
	};
</script>
<style lang="scss" scoped>
	.all {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}

		.el-table tr {
			background-color: #dd5862 !important;
		}
	}

	.el-table .warning-row {
		background: #000 !important;
	}

	.el-table .success-row {
		background: #dd5862;
	}

	#searchdiv {
		width: 400px;
		display: inline-block;
		margin-left: 8%;
	}

	#datediv {
		display: inline-block;
		width: 300px;
		margin-left: 47%;
	}
</style>
